// 引入文件
require("../../assets/css/index.less")
require("./sportdata.less");
require("../../assets/fonts/iconfont.css");

// 2.引入工具函数utils
const dom = require('../../utils/dom')
const https = require("../../utils/https")

import * as echarts from 'echarts';

// Dom加载
dom.ready(function () {
    // 返回按钮点击事件
    dom.addEvent('#backBtn', function() {
        location.href = 'my.html';
    })

    function fndata(xdata, ydata) {
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('sportTi'));
        var myChart2 = echarts.init(document.getElementById('sptClass'));

        var option1 = {
            title: {
                text: "近七天数据",
            },
            grid: {
                top: "20%",
                left: "20%",
                right: "10%",
                bottom: "30%"
            },
            xAxis: {
                type: 'category',
                data: xdata,
                axisLabel: {
                    rotate: 45
                },
                axisTick: {
                    alignWithLabel: true,
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: ydata,
                    type: 'bar'
                }
            ]
        }
        var option2 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '跑步' },
                        { value: 735, name: '训练' },
                        { value: 580, name: '骑行' },
                    ]
                }
            ]
        }
        // 绘制图表
        myChart1.setOption(option1);
        myChart2.setOption(option2);
    }


    function getUserSportData() {
        https.get('/api/exercise', function (res) {
            console.log(res);
            if (res.errno == 0) {
                console.log(res.data);
                //处理数据
                // x轴
                let x = res.data.days.map(v => v.date.slice(5));
                // y轴
                let y = res.data.days.map(v => v.sumDuration);
                console.log(x, y);
                //渲染第一个echarts
                fndata(x, y)

                
            }
        })
    }

    getUserSportData()

    https.get('/api/user/info',function(res){
        // console.log(res.data);
        let {errno,data}=res;
        if(errno==0){

            dom.getEle("#sptimg").src='http://fitness.h5.itsource.cn:3701'+data.imgUrl;
        }
    })

    https.get('/api/exercise',function(res){
        console.log(res);
        let {errno,data}=res;
        if(errno==0){
            dom.getEle('#sum7min').innerHTML=data.sum7Duration;
            dom.getEle('#sum7Calorie').innerHTML=data.sum7Calorie;
        }
    })

})



